<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head th:replace="common/head::head">
</head>

<body>
<div class="layui-row">
    <button id="addMonitor" class="layui-btn layui-btn-sm">新增监控</button>
    <button id="refresh" class="layui-btn layui-btn-sm">刷新表格</button>
</div>
<table class="layui-table" id="tab_monitor" lay-filter="tab_monitor" style="margin: 0;"></table>

</body>

<script type="text/html" id="bar_monitor">
    <a href="javascript:;" class="layui-btn  layui-btn-sm layui-btn-normal" lay-event="update">编辑</a>

    <a href="javascript:;" class="layui-btn  layui-btn-sm layui-btn-danger"
       lay-event="delete">删除</a>
</script>
<script type="text/html" id="monitor_status">
    <input type="checkbox" monitorId="{{ d.id }}" typeS="status" name="status" {{# if(d.status){ }}checked{{# } }}
           lay-skin="switch" lay-text="是|否" lay-filter="monitor_status">
</script>
<script type="text/html" id="monitor_restart">
    <input type="checkbox" monitorId="{{ d.id }}" typeS="restart" name="autoRestart"
           {{# if(d.autoRestart){ }}checked{{# } }}
           lay-skin="switch" lay-text="是|否" lay-filter="monitor_restart">
</script>
<script type="text/html" id="monitor_alarm">
    <input type="checkbox" disabled name="alarm" {{# if(d.alarm){ }}checked{{# } }} lay-skin="switch"
           lay-text="报警中|未报警">
</script>
<script type="text/javascript">
    var col = [
        {field: 'name', title: '名称'},
        {field: 'status', templet: "#monitor_status", title: '开启状态'},
        {field: 'autoRestart', templet: "#monitor_restart", title: '自动重启监控'},
        {field: 'alarm', templet: "#monitor_alarm", title: '报警状态'},
        {field: 'parent', title: '创建人'},
        {
            field: 'modifyTime', title: '修改时间', templet: function (d) {
                return formateTime(d.modifyTime);
            }
        },
        {field: 'op', title: '操作', align: 'center', toolbar: '#bar_monitor', fixed: 'right'}
    ];

    function loadSuccess() {
        tableRender({
            id: 'tab_monitor',
            elem: '#tab_monitor',
            url: './getMonitorList',
            cols: [col]
        });

        // '添加监控'点击事件
        $('#addMonitor').on('click', function () {
            // 弹出
            layerOpen({
                type: 2,
                title: '新增监控',
                content: './edit.html',
                area: ['80%', '80%'],
            });
        });

        // '刷新表格'点击事件
        $('#refresh').on('click', function () {
            table.reload('tab_monitor', {});
        });

        // 表格工具条事件
        table.on('tool(tab_monitor)', function (obj) {
            var data = obj.data;
            var event = obj.event;
            if ('update' === event) {
                // 修改
                updateApplication(data);
            } else if ('delete' === event) {
                // 删除
                deleteApplication(data);
            }
        });

        // 编辑监控
        function updateApplication(data) {
            layerOpen({
                type: 2,
                title: '修改监控',
                content: './edit.html?id=' + data.id,
                area: ['80%', '80%'],
            });
        }

        // 删除监控
        function deleteApplication(data) {
            layer.confirm('确定删除监控 ' + data.name + '？', {
                title: '系统提示'
            }, function (index) {
                layer.close(index);
                loadingAjax({
                    url: './deleteMonitor',
                    data: {
                        id: data.id
                    },
                    success: function (data) {
                        layer.msg(data.msg);
                        if (200 == data.code) {
                            table.reload('tab_monitor', {});
                        }
                    }
                });
            });
        }

        $('#monitorStatus').on('click', function () {
            // 弹出
            layerOpen({
                type: 2,
                title: '新增监控',
                content: './edit.html',
                area: ['80%', '80%'],
            });
        });

        form.on('switch(monitor_status)', function (data) {
            changeStatus(data);
        });
        form.on('switch(monitor_restart)', function (data) {
            changeStatus(data);
        });

        function changeStatus(data) {
            var check = data.elem.checked;
            var monitorId = $(data.elem).attr("monitorId");
            var type = $(data.elem).attr("typeS");
            loadingAjax({
                url: './changeStatus',
                data: {
                    id: monitorId,
                    status: check,
                    type: type
                },
                success: function (data) {
                    layer.msg(data.msg);
                }
            });
        }
    }
</script>
</html>
